<template>
  <div class="ElementEdit">
    <el-dialog :title="title" v-model="visible" width="500px" append-to-body>
      <el-form ref="elementRef" :model="form" :rules="rules" label-width="80px">
        <!-- 使用Row和Col实现两列布局 -->
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="元素编码" prop="elemCode">
              <el-input v-model="form.elemCode" placeholder="请输入元素编码" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="元素名称" prop="elemName">
              <el-input v-model="form.elemName" placeholder="请输入元素名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="是否监测设备" prop="ismonitor">
              <el-input v-model="form.ismonitor" placeholder="请输入是否监测设备" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="元素尺寸" prop="elemSize">
              <el-input v-model="form.elemSize" placeholder="请输入元素尺寸" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="位置说明" prop="elemLocation">
              <el-input v-model="form.elemLocation" placeholder="请输入位置说明" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="序列号码" prop="serialNum">
              <el-input v-model="form.serialNum" placeholder="请输入序列号码" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="最小流量" prop="minVal">
              <el-input v-model="form.minVal" placeholder="请输入最小流量" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="水表系数" prop="meterCoeff">
              <el-input v-model="form.meterCoeff" placeholder="请输入水表系数" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="每日流量" prop="dayUsage">
              <el-input v-model="form.dayUsage" placeholder="请输入每日流量" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="一级告警" prop="firstWarn">
              <el-input v-model="form.firstWarn" placeholder="请输入一级告警" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="二级告警" prop="secondWarn">
              <el-input v-model="form.secondWarn" placeholder="请输入二级告警" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="三级告警" prop="thirdWarn">
              <el-input v-model="form.thirdWarn" placeholder="请输入三级告警" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="显示次序" prop="sortIdx">
              <el-input v-model="form.sortIdx" placeholder="请输入显示次序" />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="所属区域" prop="firstAreaId">
              <el-input v-model="form.firstAreaId" placeholder="请输入所属区域" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="元素备注" prop="remark">
          <!-- type="textarea" 启用多行文本模式，rows指定默认行数（控制高度） -->
          <el-input
              type="textarea"
              rows="4"
              v-model="form.remark"
              placeholder="请输入元素备注"
              resize="none"
          />
        </el-form-item>

      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs, watch } from 'vue';

const title = ref("");
const data = reactive({
  form: {},
  rules: {
  }
});
const {form, rules } = toRefs(data);

export default defineComponent({
  props: {
    initForm: {
      type: Object,
      default: () => ({})
    },
    open: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  emits: ['submit','close','update:open'],
  setup(props, { emit }) {
    const elementRef = ref(null);
    const visible = ref(props.open);

    form.value = reactive({
      elemCode: '', elemName: '', ismonitor: '', elemSize: '', elemLocation: '',
      serialNum: '', minVal: '', meterCoeff: '', dayUsage: '', firstWarn: '',
      secondWarn: '', thirdWarn: '', sortIdx: '', firstAreaId: '', remark: ''
    });

    watch(visible, (newVal) => {
      emit('update:open', newVal);
    });

    // 监听对话框显示状态变化
    watch(() => props.open, (newVisible) => {
      visible.value = newVisible;
      if (newVisible) {
          Object.assign(form.value, props.initForm);
      } else {
        resetForm();
      }
    });

    // 提交表单
    const submitForm = async () => {
      try {
        await elementRef.value.validate();
        emit('submit', { ...form.value });
      } catch (error) {
        console.log('表单提交失败', error);
        return;
      }
    };

    const cancel = () => {
      emit('close');
      resetForm();
      visible.value = false;
    };

    const resetForm = () => {
      if (elementRef.value) {
        elementRef.value.resetFields();
      }
    };

    return {
      form,
      visible,
      elementRef,
      submitForm,
      cancel
    };
  }
});

// 表单重置
export function reset(form) {
  form.value = {
    id: null, parentId: null, zoneId: null, firstAreaId: null, elemType: null,
    elemTypeName: null, ismonitor: null, elemCode: null, elemName: null, elemGeo: null,
    elemSize: null, lineWidth: null, elemLocation: null, elemStatus: null, serialNum: null,
    initValue: null, elemLevel: null, entryMeter: null, replaceDate: null, minVal: null,
    maxVal: null, meterCoeff: null, dayUsage: null, firstWarn: null, secondWarn: null,
    thirdWarn: null, connectedMeter: null, sortIdx: null, lngMin: null, lngMax: null,
    latMin: null, latMax: null, remark: null, recordTime: null
  }
}

</script>

<style scoped>
.ElementEdit {
  margin: 10px;
}
</style>